<template>
  <base-view :model="query" @submit="search">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="代理机构代码">
          <a-input
            placeholder="输入代理机构代码"
            v-model="query.agentCode"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="代理机构名称">
          <a-input
            v-model="query.agentName"
            placeholder="输入代理机构名称"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="上级管理机构代码">
          <a-input
            placeholder="输入代理机构代码"
            v-model="query.manageInstId"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item class="search">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button type="primary" @click="add()">
          <a-icon type="plus"/>
          <span>增加</span>
        </a-button>
      </div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 2200 }"
      >
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)"
                  v-if="record.agentStatus !== '02' && record.agentStatus !== '03'" title="修改"
                  v-has-permission="['agentInfo:update']"></a-icon>
          <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情"
                  v-has-permission="['agentInfo:view']"></a-icon>
          <a-icon type="play-circle" theme="twoTone" twoToneColor="#4a9ff5" title="启用" @click="use(record)"
                  v-hasPermission="['agentInfo:update']" v-if="record.agentStatus === '02'"></a-icon>
          <a-icon type="minus-circle" theme="twoTone" twoToneColor="#4a9ff5" title="停用" @click="stop(record)"
                  v-hasPermission="['agentInfo:update']"
                  v-if="record.agentStatus === '01' || record.agentStatus === '00'"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" title="注销" @click="cancel(record)"
                  v-hasPermission="['agentInfo:delete']" v-if="record.agentStatus !== '03'"></a-icon>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="['agentInfo:view', 'agentInfo:update','agentInfo:delete']"
          ></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <agent-info-operation ref="modalForm"/>
    </a-modal>
  </base-view>
</template>

<script>
    import AgentInfoOperation from "./AgentInfoOperation";
    import {mapState} from "vuex"

    export default {
        name: "AgentInfo",
        components: {AgentInfoOperation},
        data() {
            return {
                beanInfo: {},
                modalVisible: false,
                isHideFoot: false,
                modalTitle: "",
                operationType: "add",
                query: {instId: "", agentCode: "", agentName: "", manageInstId: ""},
                loading: false,
                pagination: {
                    pageNum: 1,
                    pageSize: 10,
                    pageSizeOptions: ["10", "20", "30", "40", "100"],
                    defaultCurrent: 1,
                    defaultPageSize: 10,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) =>
                        `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
                },
                columns: [
                    {
                        title: "代理机构代码",
                        dataIndex: "agentCode",
                        width: 150,
                    },
                    {
                        title: "代理机构名称",
                        dataIndex: "agentName",
                        width: 150,
                    },
                    {
                        title: "上级管理机构代码",
                        dataIndex: "manageInstId",
                        width: 200,
                    },
                    {
                        title: "代理商联系人",
                        dataIndex: "contactName",
                        width: 150,
                    },
                    {
                        title: "联系人电话",
                        dataIndex: "contactPhone",
                        width: 200,
                    },
                    {
                        title: "联系人邮箱",
                        dataIndex: "contactEmaiil",
                        width: 200,
                    },
                    {
                        title: "代理机构邮编",
                        dataIndex: "postCode",
                        width: 200,
                    },
                    {
                        title: "代理商地址",
                        dataIndex: "agentAddr",
                        width: 200,
                    },
                    {
                        title: "创建时间",
                        dataIndex: "createTime",
                        width: 200,
                    },
                    {
                        title: "法人行",
                        dataIndex: "instId",
                        width: 150,
                    },
                    {
                        title: "审批状态",
                        dataIndex: "auditStatus",
                        width: 200,
                        customRender: (text, row, index) => {
                            switch (text) {
                                case "00":
                                    return "待提交审批";
                                case "01":
                                    return "新增-审批流程中";
                                case "02":
                                    return "新增-审批通过";
                                case "03":
                                    return "新增-审批拒绝";

                                case "41":
                                    return "修改-审批流程中";
                                case "42":
                                    return "修改-审批通过";
                                case "43":
                                    return "修改-审批拒绝";

                                case "21":
                                    return "停用-审批流程中";
                                case "22":
                                    return "停用-审批通过";
                                case "23":
                                    return "停用-审批拒绝";

                                case "31":
                                    return "启用-审批流程中";
                                case "32":
                                    return "启用-审批通过";
                                case "33":
                                    return "启用-审批拒绝";

                                case "11":
                                    return "注销-审批流程中";
                                case "12":
                                    return "注销-审批通过";
                                case "13":
                                    return "注销-审批拒绝";
                            }
                        },
                    },
                    {
                        title: "代理机构状态",
                        dataIndex: "agentStatus",
                        width: 150,
                        customRender: (text, row, index) => {
                            switch (text) {
                                case "00":
                                    return "非正式";
                                case "01":
                                    return "正式";
                                case "02":
                                    return "停用";
                                case "03":
                                    return "注销";
                            }
                        },
                    },
                    {
                        title: "操作",
                        scopedSlots: {customRender: "operation"},
                        fixed: "right",
                        width: 120,
                    },
                ],
                dataSource: [],
            };
        },
        computed: {
            ...mapState({
                currentUser: state => state.account.user
            })
        },
        methods: {
            async submit() {
                const res = await this.$refs.modalForm.submit();
                if (res) {
                    this.modalVisible = false;
                    this.pagination.pageSize = 1;
                    await this.search();
                }
            },

            async reset() {
                // this.query = {instId: this.query.instId}
                this.query = {}
                this.pagination.pageNum = this.pagination.defaultCurrent;
                this.pagination.pageSize = this.pagination.defaultPageSize;
                this.dataSource = [];
                // await this.search();

                if (!this.currentUser.admin) {
                    this.query.instId = this.currentUser.instId;
                    await this.search();
                }
            },
            async search(e) {
                e && e.preventDefault && e.preventDefault();
                console.log(e);
                try {
                    const res = await this.$get("/admin/merParam/agentInfo/list", {
                        instId: this.query.instId,
                        agentCode: this.query.agentCode,
                        agentName: this.query.agentName,
                        manageInstId: this.query.manageInstId,
                        pageNum: this.pagination.pageNum,
                        pageSize: this.pagination.pageSize,
                    });
                    this.dataSource = res.data.rows;
                    this.$set(this.pagination, "total", +res.data.total);
                } catch (e) {
                    console.error(e);
                }
            },
            openModal(type = "add", beanInfo) {
                this.modalTitle = {
                    add: "新增",
                    edit: "编辑",
                    view: "详情",
                    use: "启用",
                    stop: "停用",
                    cancel: "注销",
                }[type];
                this.modalVisible = true;
                if (type === 'view') {
                    this.isHideFoot = true;
                } else {
                    this.isHideFoot = false
                }
                this.$nextTick(() => {
                    this.$refs.modalForm.setOperatorType(type);
                    this.$refs.modalForm.setBeanInfo(beanInfo, this.query.instId);
                    this.$refs.modalForm.resetFields(beanInfo);
                });
            },
            async add() {
                this.openModal("add");
            },
            async edit(item) {
                this.openModal("edit", item);
            },
            view(item) {
                this.openModal("view", item);
            },
            stop(item) {
                this.openModal("stop", item);
            },
            use(item) {
                this.openModal("use", item);
            },
            cancel(item) {
                this.openModal("cancel", item);
            },
            pageChange(e) {
                this.pagination.pageNum = e.current;
                this.pagination.pageSize = e.pageSize;
                this.search();
            },
        },
    };
</script>
<style lang="less" scoped>
  @import "../../../../../static/less/Common";
</style>
